<template>
  	<div id="index" class="zhezhao">
    	<div class="games slideOut" v-if="show == 'index'">
			<div class="top">
				<div class="back" @click="myrouter()"></div>
				<div class="title">{{ $t("m.txt") }}</div>
				<div class="yy" @click="yyswitch()"></div>
			</div>

      		<div class="cd-top">
        		<div class="gamegz" @click="goto('gamegz')">{{ $t("m.yxgz") }}</div>
				<div class="gametime">
					<div>{{ $t("m.yxsysj") }}</div>
					<div class="time">{{ gametime }}</div>
				</div>
        		<div class="gamegz" @click="goto('gamejl')">{{ $t("m.yxjl") }}</div>
      		</div>
      		<div class="gametop"></div>

      		<div class="gamebody">
        		<div class="cn-wrapper">
          			<div class="mmt">
            			<div class="bgtx">
							<img :src="gameuinfo.length > 9 ? gameuinfo[9].uimg : imgs" class="txs" />
							<div :class="[zactive == 10 ? 'ac' : 'bc']">
								<div class="hws">10</div>
							</div>
            			</div>

            			<div class="bgtx to">
							<img :src="gameuinfo.length > 0 ? gameuinfo[0].uimg : imgs" class="txs" />
							<div :class="[zactive == 1 ? 'ac' : 'bc']">
								<div class="hw">1</div>
							</div>
            			</div>
            			<div class="bgtx">
							<img :src="gameuinfo.length > 1 ? gameuinfo[1].uimg : imgs" class="txs" />
							<div :class="[zactive == 2 ? 'ac' : 'bc']">
								<div class="hw">2</div>
							</div>
            			</div>
          			</div>
          			<div class="bds">
            			<div class="cct">
              <div class="bgtx co2">
                <img
                  :src="gameuinfo.length > 8 ? gameuinfo[8].uimg : imgs"
                  class="txs"
                />
                <div :class="[zactive == 9 ? 'ac' : 'bc']">
                  <div class="hw">9</div>
                </div>
              </div>
              <div class="bgtx co2">
                <img
                  :src="gameuinfo.length > 7 ? gameuinfo[7].uimg : imgs"
                  class="txs"
                />
                <div :class="[zactive == 8 ? 'ac' : 'bc']">
                  <div class="hw">8</div>
                </div>
              </div>
            </div>
            <div class="gamestarts">{{ sy ? $t("m.kspp") : $t("m.yxz") }}</div>

            <div class="cct">
              <div class="bgtx co">
                <img
                  :src="gameuinfo.length > 2 ? gameuinfo[2].uimg : imgs"
                  class="txs"
                />
                <div :class="[zactive == 3 ? 'ac' : 'bc']">
                  <div class="hw">3</div>
                </div>
              </div>
              <div class="bgtx co">
                <img
                  :src="gameuinfo.length > 3 ? gameuinfo[3].uimg : imgs"
                  class="txs"
                />
                <div :class="[zactive == 4 ? 'ac' : 'bc']">
                  <div class="hw">4</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mmt">
            <div class="bgtx">
              <img
                :src="gameuinfo.length > 6 ? gameuinfo[6].uimg : imgs"
                class="txs"
              />
              <div :class="[zactive == 7 ? 'ac' : 'bc']">
                <div class="hw">7</div>
              </div>
            </div>
            <div class="bgtx bo">
              <img
                :src="gameuinfo.length > 5 ? gameuinfo[5].uimg : imgs"
                class="txs"
              />
              <div :class="[zactive == 6 ? 'ac' : 'bc']">
                <div class="hw">6</div>
              </div>
            </div>
            <div class="bgtx">
              <img
                :src="gameuinfo.length > 4 ? gameuinfo[4].uimg : imgs"
                class="txs"
              />
              <div :class="[zactive == 5 ? 'ac' : 'bc']">
                <div class="hw">5</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="gamebottom">
        <div class="gamebtn">
          <div class="buy" @click="goto('buymp')">{{ $t("m.gmmp") }}</div>
          <div class="startgame" @click="yanzheng">{{ $t("m.kspp") }}</div>
          <div class="yjtg" @click="autogame">{{ $t("m.yjtg") }}</div>
        </div>
        <div>
          <div class="jrsyjsj">
            {{ $t("m.jrsy")
            }}<span class="num">{{ s ? s.surplusGameNum : "0" }}</span
            >{{ $t("m.jushu") }}
          </div>
          <div class="tik">
            <span>{{
              s ? s.contractExpireDate : $t("m.zanweigoumaimenpiao")
            }}</span>
          </div>
        </div>
      </div>

      <div class="bottomcd">
        <div
          class="cdbtn"
          :class="[active == 1 ? 'cdbg2' : 'cdbg']"
          @click="changer(1)"
        >
          <div
            class="icon icbs1"
            :class="[active == 1 ? 'icbs1' : 'icls1']"
          ></div>
          <div :class="[active == 1 ? 'bs' : 'ls']">{{ $t("m.shouye") }}</div>
        </div>
        <div class="cdbtn cdbg" @click="goto('basedata')">
          <div class="icon icls2"></div>
          <div class="ls">{{ $t("m.shuju") }}</div>
        </div>
        <div class="cdbtn cdbg" @click="goto('myinfo')">
          <div class="icon icls3"></div>
          <div class="ls">{{ $t("m.wode") }}</div>
        </div>
      </div>

      <div class="xzks" v-if="mode">
        <div class="mywin">
          <div class="dliogtxt">{{ $t("m.wodejiangli") }}</div>
          <div>
            <p class="jl">{{ sfzj ? baseFt + "BFR" : baseCny + "USDT" }}</p>
            <p class="sfjx">{{ $t("m.shifojixuyouxi") }}</p>
          </div>
          <div class="flex-row" v-if="autogames">
            <div class="queding" @click="qx()">{{ $t("m.yjtgs") }}</div>
          </div>
          <div class="flex-row" v-else>
            <div class="queding" @click="qr()">{{ $t("m.jixu") }}</div>
            <div class="quxiao" @click="qx()">{{ $t("m.quxiao") }}</div>
          </div>
        </div>
      </div>

      <div class="xzks" v-if="yymode">
        <div class="dlig">
          <div class="yytitle">{{ $t("m.xuanzeyuyan") }}</div>
          <div class="yysch">
            <div
              class="zwxz"
              :class="dqyy == 'zh-CN' ? 'xz' : ''"
              @click="chsddf('zh-CN')"
            >
              {{ $t("m.zhongwen") }}
            </div>
            <div
              class="ywxz"
              :class="dqyy == 'en-US' ? 'xz' : ''"
              @click="chsddf('en-US')"
            >
              English
            </div>
          </div>
          <div class="flex-row">
            <div class="queding" @click="yyqr()">{{ $t("m.queding") }}</div>
          </div>
        </div>
      </div>
      <div class="xzks" v-if="automode">
        <div class="autodlig">
          <div class="dliogtxt">{{ $t("m.yijiantuoguan") }}</div>
          <div class="autobody">
            <div class="autotitle">
              {{ $t("m.yijiantuoguancont") }}
            </div>
            <div>
              <div class="tip">{{ $t("m.wenxintishi") }}</div>
              <div class="autotitle">
                {{ $t("m.wenxintishicont") }}
              </div>
            </div>

            <div class="flex-row t-5" v-if="autogames">
              <div class="queding" @click="autoqx()">
                {{ $t("m.quxiaotg") }}
              </div>
              <div class="quxiao" @click="autogb()">{{ $t("m.quxiao") }}</div>
            </div>
            <div class="flex-row t-5" v-else>
              <div class="queding" @click="autoqr()">{{ $t("m.queding") }}</div>
              <div class="quxiao" @click="autogb()">{{ $t("m.quxiao") }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="xzks" v-if="ggmode">
        <div class="ggdlig">
          <div class="ggdliogtxt">{{ $t("m.gonggao") }}</div>
          <div class="ggbody">
            <div class="ggtitle">
              公告内容公告内容公告内容公告内容公告内容公告内容
              公告内容公告内容公告内容公告内容公告内容公告内容
              公告内容公告内容公告内容公告内容公告内容公告内容
              公告内容公告内容公告内容公告内容公告内容公告内容
              公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
            </div>

            <div class="flex-row">
              <div class="queding" @click="ggqr()">{{ $t("m.zhidaole") }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="xzks" v-if="bdgxmode">
        <div class="dlig">
          <div class="bdgx">
            <div class="bdgxtitle">
              <input
                type="text"
                :placeholder="$t('m.tianxieyaoqingma')"
                v-model="yqmcode"
                class="inputs"
              />
            </div>
            <div class="errortip"></div>
            <div class="flex-row">
              <div class="queding" @click="bdgxqr()">{{ $t("m.queding") }}</div>
              <div class="quxiao" @click="bdgxqx()">{{ $t("m.quxiao") }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="xzks" v-if="ppshow">
        <div class="boxs">
          <div class="pshe">
            <img class="loging" src="./assets/xjimg/ppgame.png" alt />
          </div>
          <div class="pptxt">{{ $t("m.zhengzaipipei") }}{{ time }}s</div>
        </div>
      </div>

      <div class="xzks" v-if="mymode">
        <div class="dlig">
          <div class="bdgx">
            <div class="bdgxtitle">
              <input
                type="text"
                placeholder="ID"
                v-model="uid"
                class="inputs"
              />
              <input
                type="text"
                placeholder="ADDRESS"
                v-model="address"
                class="inputs t-1"
              />
            </div>
            <div class="flex-row t-1">
              <div class="queding" @click="sbdgxqr()">
                {{ $t("m.queding") }}
              </div>
              <div class="quxiao" @click="sbdgxqx()">{{ $t("m.quxiao") }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <gamegz v-if="show == 'gamegz'" @coos="changercolse" />
    <gamejl v-if="show == 'gamejl'" @coos="changercolse" />
    <buymp v-if="show == 'buymp'" @coos="changercolse" />
    <myinfo v-if="show == 'myinfo'" @coos="changercolse" />
    <basedata v-if="show == 'basedata'" @coos="changercolse" />
  </div>
</template>

<script>
import gamegz from "./compontent/gamegz";
import gamejl from "./compontent/gamejl";
import buymp from "@/compontent/buymp";
import myinfo from "@/compontent/myinfo";
import basedata from "@/compontent/basedata";
export default {
  name: "index",
  data() {
    return {
      mymode: false,
      uid: "",
      address: "",
      gametime: "00:00-23:59",
      show: sessionStorage.getItem("abnf") || "index",
      active: 1,
      sy: true,
      s: "",
      d: "",
      yqmcode: "",
      ppshow: false,
      zj: 5,
      time: 0,
      timer: 10,
      nums: 0,
      ss: "",
      state: false,
      tiaojian: false,
      autogames: false,
      gameuinfo: [],
      gamesuccess: false,
      mode: false,
      yymode: false,
      automode: false,
      ggmode: false,
      bdgxmode: false,
      zactive: 0,
      baseFt: "0",
      baseCny: "0",
      userId: "",
      sfzj: "",
      dqyy: this.$store.getters.language,
      moshow: true,
      gamestart: true,
      gameover: true,
      gameshows: "111",
      img: [
        require("./assets/tx/T1.png"),
        require("./assets/tx/T2.png"),
        require("./assets/tx/T3.png"),
        require("./assets/tx/T4.png"),
        require("./assets/tx/T5.png"),
        require("./assets/tx/T6.png"),
        require("./assets/tx/T7.png"),
        require("./assets/tx/T8.png"),
        require("./assets/tx/T9.png"),
        require("./assets/tx/T10.png"),
        require("./assets/tx/T11.png"),
        require("./assets/tx/T12.png"),
        require("./assets/tx/T13.png"),
        require("./assets/tx/T14.png"),
        require("./assets/tx/T15.png"),
        require("./assets/tx/T16.png"),
        require("./assets/tx/T17.png"),
        require("./assets/tx/T18.png"),
        require("./assets/tx/T19.png"),
        require("./assets/tx/T21.png"),
        require("./assets/tx/T22.png"),
        require("./assets/tx/T23.png"),
        require("./assets/tx/T24.png"),
        require("./assets/tx/T25.png"),
        require("./assets/tx/T26.png"),
        require("./assets/tx/T27.png"),
        require("./assets/tx/T28.png"),
        require("./assets/tx/T29.png"),
        require("./assets/tx/T30.png"),
      ],
      imgs: require("./assets/tx/T0.png"),
    };
  },
  components: { gamegz, gamejl, buymp, myinfo, basedata },

  created() {
    this.yqmcode = this.getQueryString("code");
    console.log(this.getQueryString("address"));
  },
  mounted() {
    this.getgameNum();
  },
  methods: {
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },

    goto(val) {
      if (this.state) {
        return;
      }
      sessionStorage.setItem("abnf", val);
      this.show = sessionStorage.getItem("abnf");
      console.log(this.show);
    },
    gbcolor() {},
    changercolse(data) {
      if (data) {
        sessionStorage.setItem("abnf", "index");
        this.show = sessionStorage.getItem("abnf");
        this.getgameNum();
      }
    },
    changer(val) {
      this.active = val;
      //   if(val==1){}
      //   if(val==2){}
      if (val == 3) {
        sessionStorage.setItem("abnf", "myinfo");
        this.show = sessionStorage.getItem("abnf");
      }
    },
    yanzheng() {
      if (this.state) {
        return;
      }
      this.$get({
        url: "gms-history/matching/" + this.$store.getters.nameid,
        data: {},
        callback: (data) => {
          this.$nextTick(function () {
            var list = data.data;
            if (list) {
              this.tiaojian = true;
              this.gamestartpp();
            } else {
              if (data.message == "请先绑定推荐人") {
                this.bdgxmode = true;
              } else if (data.message == "游戏次数不足") {
                this.$toast(this.$i18n.t("m.gamecishuerror"));
              } else if (data.message == "钱包余额不足") {
                this.$toast(this.$i18n.t("m.gameqianbaoerror"));
              } else {
                this.$toast(this.$i18n.t("m.pperror"));
              }
            }
          });
        },
      });
    },

    gamestartpp() {
      if (this.state) {
        return;
      }
      if (this.tiaojian) {
        this.state = true;
        this.$get({
          url: "gms-history/gamStart/" + this.$store.getters.nameid,
          data: {},
          callback: (data) => {
            this.$nextTick(function () {
              var list = data.data;
              if (list) {
                this.getgameNum();
                this.list = [
                  {
                    userId: list.userId,
                    uimg: this.img[0],
                  },
                ];
                this.gamesuccess = true;
                this.baseFt = list.gameBonusDOT;
                this.baseCny = list.gameBonusUSDT;
                this.userId = list.winUserId;
                if (this.userId == this.$store.getters.nameid) {
                  this.sfzj = true;
                } else {
                  this.sfzj = false;
                }
              } else {
                this.gamesuccess = false;
              }
            });
          },
        }).catch(() => {
          this.$toast(this.$i18n.t("m.errordata"));
          this.state = false;
        });
        this.ppshow = true;
        this.timer = setInterval(() => {
          if (this.time == 30) {
            this.$toast(this.$i18n.t("m.pipeichaoshi"));
            this.colsegame();
          }
          if (this.time == 3 && this.gamesuccess) {
            this.add();
            this.time = 0;
            clearInterval(this.timer);
          } else {
            this.time++;
          }
        }, 1000);
      }
    },
    add() {
      let l = this.list.length;
      for (var s = 0; s < 10 - l; s++) {
        var imgs = this.shuffle(this.img);
        let a = this.RandomNum(0, 28);
        this.list.push({
          uimg: imgs[a],
          userId: "0001",
        });
      }
      console.log(this.list);
      this.addgameplayer();
    },
    addgameplayer() {
      this.pipei = [];
      if (this.gamestart) {
        this.ppshow = false;
        var a = 0;
        this.pipei = this.shuffle(this.list);
        console.log(this.pipei + "this.pipei");
        this.pipei.forEach((element, i) => {
          if (element.userId == this.userId) {
            console.log(" this.nums", this.nums, element.userId);

            this.nums = Number(i) + 1;
          }

          if (element.userId == this.$store.getters.nameid) {
            this.ss = Number(i);
            console.log("ss", this.ss);
          }
        });
        console.log("userId", this.pipei);
        if (this.userId == 0) {
          var s = "";
          for (var i = 0; i < 20; i++) {
            s = this.RandomNum(0, 10);
            if (s != this.ss + 1) {
              this.zj = s;
            } else {
              i++;
            }
          }
          console.log("tag", s);
        } else {
          this.zj = this.nums;
        }
        console.log("zj", this.zj);
        setTimeout(() => {
          var t = setInterval(() => {
            if (a == 11) {
              clearInterval(t);
              this.pmdgames();
            } else {
              this.gameuinfo.push(this.pipei[a]);
              a++;
            }
          }, 200);
        }, 200);
      }
    },

    RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      if (Math.round(Rand * Range) == 0) {
        return Min + 1;
      }
      var num = Min + Math.round(Rand * Range);
      return num;
    },
    shuffle(arr) {
      let i = arr.length;
      let j = 0;
      while (i) {
        j = Math.floor(Math.random() * i--);
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
      return arr;
    },
    colsegame() {
      this.state = false;
    },
    pmdgames() {
      this.sy = false;
      var i = this.zj,
        j = 10,
        s = 0,
        tr = 180;
      var t = setInterval(() => {
        this.zactive = i;
        if (s >= 5) {
          tr = 100;
          clearInterval(t);
          var w = setInterval(() => {
            this.zactive = i;
            if (i == j) {
              s++;
              i = 1;
            } else if (s == 10 && this.zj) {
              var h = i;
              var a = setInterval(() => {
                this.zactive = h;
                if (h == this.zj) {
                  this.zactive = this.zj;
                  this.sy = true;
                  clearInterval(a);
                  if (this.gamestart && this.zj) {
                    setTimeout(() => {
                      this.gameover = false;
                      this.mode = true;
                      this.state = false;
                      this.active = 2;
                    }, 1000);
                    setTimeout(() => {
                      this.regame();
                    }, 4000);
                  }
                } else h++;
              }, 400);
              clearInterval(w);
            } else {
              i++;
            }
          }, tr);
        }
        if (i == j) {
          i = 1;
          s++;
        } else {
          i++;
        }
      }, tr);
    },
    regame() {
      this.gameuinfo = [];

      if (this.autogames) {
        this.qr();
      }
      console.log("重新开始");
    },
    qr() {
      this.state = false;
      this.yanzheng();
      this.mode = false;
    },
    qx() {
      this.mode = false;
      this.zactive = 0;
    },

    yyswitch() {
      this.yymode = true;
    },
    yyqr() {
      this.$i18n.locale = this.dqyy;
      this.yymode = false;
      this.$store.commit("language", this.dqyy);
    },
    chsddf(val) {
      this.dqyy = val;
    },
    autogame() {
      this.automode = true;
    },
    autoqr() {
      this.automode = false;
      this.autogames = true;
    },
    autoqx() {
      this.automode = false;
      this.autogames = false;
    },
    autogb() {
      this.automode = false;
    },
    ggqr() {
      var datas = {
        params: {
          id: this.$store.getters.nameid,
          status: "0",
        },
      };
      this.$get({
        url: "/mms-news/showNews",
        data: datas,
        callback: (data) => {
          this.$nextTick(function () {
            var show = data.data;
            if (show) {
              this.ggmode = false;
            }
          });
        },
      });
    },
    bdgxqr() {
      if (!this.yqmcode) {
        this.$toast(this.$i18n.t("m.shuruyaoqingma"));
        return;
      }
      this.$toast.loading();
      var datas = {
        params: {
          uid: this.$store.getters.nameid,
          recommendCode: this.yqmcode,
        },
      };
      this.$get({
        url: "wms-wallet/createRecommend",
        data: datas,
        callback: (data) => {
          this.$nextTick(function () {
            var list = data.data;
            if (list) {
              this.$toast(this.$i18n.t("m.messagesuccess"));
              this.bdgxmode = false;
              this.yqmcode = "";
            } else {
              this.$toast(this.$i18n.t("m.messageerror"));
            }
          });
        },
      }).catch(() => {
        this.$toast(this.$i18n.t("m.errordata"));
      });
    },
    bdgxqx() {
      this.bdgxmode = false;
    },
    myrouter() {
      this.mymode = true;
    },
    sbdgxqr() {
      this.$store.commit("userWallet", this.address);
      this.$store.commit("nameid", this.uid);
      this.getgameNum();
      this.mymode = false;
    },
    sbdgxqx() {
      this.mymode = false;
    },
    getgameNum() {
      this.$get({
        url: "wms-wallet/user-game-info/" + this.$store.getters.userWallet,
        data: {},
        callback: (data) => {
          this.$nextTick(function () {
            this.s = data.data;
            if (this.s) {
              var list = this.s.gametimeList;
              if (list) {
                this.gametime =
                  list[0].gameStart + ":00-" + list[0].gameEnd + ":00 ";
              } else {
                this.gametime = this.$i18n.t("m.xitonggenxin");
              }
              if (this.s.gsecret != 0) {
                this.ggmode = true;
              }
              this.$store.commit("nameid", this.s.id);
              this.$store.commit("usdt", this.s.trxAmount);
              this.$store.commit("dot", this.s.ftAmount);
              if (!this.s.isHasRec && this.yqmcode) {
                this.bdgxqr();
              }
            }
          });
        },
      }).catch(() => {
        this.$toast(this.$i18n.t("m.errordata"));
      });
    },
  },
};
</script>

<style  scoped>
</style>